<template>
	<div id="Search">
	<!-- 标题搜索 -->
		<div class="header" >
				<div class="return_btn">
					<router-link class="mui-icon mui-icon-back" to="/wechat" ></router-link ></div>
				<div class="header_search">
					<router-link to="/search" class="mui-icon mui-icon-search"></router-link>
					<input type="text"class="search_shop" placeholder="搜索您想要买的商品">
				</div>
				<div class="cancel_btn"><router-link  to="/wechat">取消</router-link ></div>	
		</div>
		<!-- 热门搜索 -->
		<div class="hot_search">
			<p>热门搜索</p>
			<p>
				<router-link to="/fruit">自营</router-link>
				<router-link to="/green">麦德龙</router-link>
				<router-link to="/oil">油</router-link>
				<router-link to="/chang">米</router-link>
			</p>
			<p>
				<router-link to="/bar">水</router-link>
				<router-link to="/bar">牛奶</router-link>
				<router-link to="/bar">饮料</router-link>
				<router-link to="/clean">纸</router-link>
			</p>
			<p>搜索历史</p>
			<ul class="search_shops_list">
				<li  v-for="obj in dataArr"></li>
				<!-- <li>纸</li>
				<li>饮料</li> -->
			</ul>
			<div class="clearBtn"><button @click="clearBtn" class="clear_recode">清空搜索记录</button></div>
			
		</div>
		
	</div>
	
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	a{
		color:#8b8b8b;
		font-size:2rem;
	}
	#Search{
		width: 100%;
		background: #f0f0f0;
	}
	.header{
		width: 100%;
		height:4rem;
		padding: 0.5rem 0;
		background: red;
		display: flex;
	}
	.header .return_btn .mui-icon{
		font-size: 3.5rem;
		color:#fff;
		display: inline-block;
		
	}
	.header_search{
		width: 73%;
		height:3rem;
		border-radius: 0.3rem;
		background: #fff;
		
	}
	.header_search .mui-icon-search{
		width: 10%;
		color:red;
		height:3rem;
		line-height: 3rem;
		font-size:3rem;
		display: inline-block;
	} 
	.header_search input{
		width: 80%;
		font-size: 1.8rem;
		color:#999;
		outline: none;
		border: none;
		text-indent: 1rem;
		height:2rem;
		line-height: 2rem;
		display: inline-block;
	}
	.header .cancel_btn{
		
		text-indent: 1rem;
		height: 3rem;
		line-height: 3rem;
	}
	.header .cancel_btn a{
		color:#fff;
	}
	
	/*热门搜素*/
	.hot_search{
		margin-top:1.5rem;

	}
	.hot_search p{
		text-align: left;
		padding-left: 0.5rem;
	}
	.hot_search p a{
		padding:0.2rem 1.3rem;
		border:1px solid #ccc;
		border-radius: 0.3rem;
		font-size:1.5rem;
		background: #fff;
	}
	.search_shops_list li{
		padding-left: 1rem;
		text-align: left;
		background: #fff;
		color:#8b8b8b;
		font-size: 1.5rem;
		height:3.5rem;
		line-height: 3.5rem;
		border-bottom:1px solid #ccc;
	}
	.clearBtn{
		margin-top: 2rem;
		text-align:center;
	}
</style>
<script>
	export default {
		name:'Search',
		data () {
			return {
				msg:"hello",
				dataArr:[]

			}
		},
		methods:{
			clearBtn:function(){
				this.dataArr="";

			},
			change:function(){
				
			}

		}
	}
</script>